<template>
  <price-layout @click-down="handleDown" @click-save="handleSubmit" @click-batch="handleBatch">
    <template #header>
      <el-card>
        <div slot="header" class="clearfix" style="border-bottom: 1px solid #cccc;padding-bottom: 15px;">
          <span style="font-weight: bold;padding-left: 15px;">箱体列表</span>
        </div>
        <div class="table" style="margin-top: 20px;">
          <el-table :border="true" :data="tableData" v-loading="loadingPage" ref="tableref" style="width: 100%" highlight-current-row  @current-change="handleCurrentChange">
                <el-table-column width="60" type="selection" align="center"></el-table-column>
                <el-table-column width="150" prop="name" label="箱体名称"show-overflow-tooltip>
                  <template #default="scope">
                    <template v-if="scope.row.isedit">
                      <el-input v-model="scope.row.name"></el-input>
                    </template>
                    <template v-else>
                      {{ scope.row.name }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column width="250" prop="sn" label="箱体型号">
                  <template #default="scope">
                    <template v-if="scope.row.isedit">
                      <el-input v-model="scope.row.sn"></el-input>
                    </template>
                    <template v-else>
                      {{ scope.row.sn }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column width="120" prop="nums" label="器件数量"></el-table-column>
                <el-table-column width="120" prop="price" label="总价"></el-table-column>
                <el-table-column prop="from" label="来源"></el-table-column>
                <el-table-column label="操作" fixed="right" width="120">
                    <template #default="scope">
                        <span class="table-operate-btn" @click="handleSave(scope.row,scope.$index,0,'box')" v-if="scope.row.isedit">保存</span>
                        <span class="table-operate-btn" @click="handleEdit(scope.row,scope.$index,0,'box')" v-else>修改</span>
                        <span class="table-operate-btn" @click="handleDlete(scope.row,scope.$index,0,'box')">删除</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
      </el-card>
    </template>
    <template #main>
      <el-card>
        <div slot="header" class="clearfix" style="border-bottom: 1px solid #cccc;padding-bottom: 15px;">
          <span style="font-weight: bold;padding-left: 15px;">器件表</span>
        </div>
        <div class="table" style="margin-top: 20px;">
          <el-table :border="true" :data="sensorData" v-loading="loadingPage" ref="tableref" :row-class-name="tableRowClassName">
                <el-table-column width="60" type="selection" align="center"></el-table-column>
                <el-table-column width="100" prop="category_name" label="元件名称"show-overflow-tooltip></el-table-column>
                <el-table-column width="200" prop="prodcut_sn" label="规格型号"></el-table-column>
                <el-table-column width="80" prop="unit" label="单位"></el-table-column>
                <el-table-column width="80" prop="nums" label="数量">
                  <template #default="scope">
                      <template v-if="scope.row.isedit">
                        <el-input v-model="scope.row.nums"></el-input>
                      </template>
                      <template v-else>
                        {{ scope.row.nums }}
                      </template>
                  </template>
                </el-table-column>
                <el-table-column width="80" prop="prodcut_price" label="单价">
                  <template #default="scope">
                      <template v-if="scope.row.isedit">
                        <el-input v-model="scope.row.prodcut_price"></el-input>
                      </template>
                      <template v-else>
                        {{ scope.row.prodcut_price }}
                      </template>
                  </template>
                </el-table-column>
                <el-table-column width="150" prop="brand" label="品牌"></el-table-column>
                <el-table-column width="200" prop="dianame" label="cad名"></el-table-column>
                <el-table-column prop="from" label="来源"></el-table-column>
                <el-table-column label="操作" fixed="right" width="150">
                    <template #default="scope">
                        <span class="table-operate-btn" @click="handleSave(scope.row,current, scope.$index, 'sensor')" v-if="scope.row.isedit">保存</span>
                        <span class="table-operate-btn" @click="handleEdit(scope.row,current, scope.$index, 'sensor')" v-else v-show="isShowBtn('projectManage','报价管理','Update')">修改</span>
                        <span class="table-operate-btn" @click="handleSelect(scope.row,current, scope.$index, 'sensor')" v-show="isShowBtn('projectManage','报价管理','Delete')">选型</span>
                        <span class="table-operate-btn" @click="handleDlete(scope.row,current, scope.$index, 'sensor')">删除</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <batch-module-price-manage ref="batchModuleFlag" @refreshData="batchData"></batch-module-price-manage>
        <change-module-product-manage ref="changeModuleFlag" @refreshData="changeData"></change-module-product-manage>
      </el-card>
    </template>

  </price-layout>
</template>
<script>
    import {mallPojectPrice,mallPojectDown,mallPojectPriceSave} from '@/api/api'
    import PriceLayout from "./components/priceLayout";
    import batchModulePriceManage from "./components/batchModulePriceManage";
    import changeModuleProductManage from "./components/changeModuleProductManage";
    export default {
        components:{
          batchModulePriceManage,
          changeModuleProductManage,
          PriceLayout
        },
        name:'goodsManage',
        data() {
            return {
                id:0,
                name:0,
                current:0,
                loadingPage:false,
                formInline:{
                    boxname:"",
                    sensorsn:"",
                    price:""
                },
                statusList:[
                    {id:0,name:'排队中'},
                    {id:2,name:'正在导出'},
                    {id:1,name:'导出成功'},
                    {id:3,name:'导出失败'},
                ],
                sensorData:[],
                tableData:[],
                pricesData:[],

            }
        },
        methods:{
          handleDlete(row,current,index,flag){
            if (flag=="box"){
              this.tableData.splice(current, 1)
              if (this.current=current &&current!=0){
                this.sensorData = this.tableData[0].sensor
              }else{
                this.sensorData =[]
              }
            }
            if (flag=="sensor"){
              this.tableData[current].sensor.splice(index, 1)
              that.sensorData = that.tableData[current].sensor
            }
          },
          handleEdit(row,current,index,flag){
            if (flag=="box"){
              this.tableData[current].isedit=true
            }
            if (flag=="sensor"){
              this.tableData[current].sensor[index].isedit=true
            }
          },
          handleSave(row,current,index,flag){
            if (flag=="box"){
              this.tableData[current].isedit=false
            }
            if (flag=="sensor"){
              this.tableData[current].sensor[index].isedit=false
            }
          },
          handleSelect(row,current,index,flag){
            this.$refs.changeModuleFlag.addModuleFn({groupid:current,rowid:index},'新增')
          },
          extractNumbers(str) {
            const numRegex = /(\d+(\.\d+)?)/; // 匹配数字的正则表达式
            const match = str.match(numRegex);
            return match ? Number(match[0]) : null; // 返回数字或者null（如果没有匹配）
          },
          changeData(data,newdata){
            this.tableData[data.groupid].sensor[data.rowid].prodcut_id=newdata.id
            this.tableData[data.groupid].sensor[data.rowid].prodcut_sn=newdata.name
            this.tableData[data.groupid].sensor[data.rowid].prodcut_price=newdata.price
            if(this.tableData[data.groupid].sensor[data.rowid].category_id!=""&&!(this.tableData[data.groupid].sensor[data.rowid].category_id==newdata.category_id)){
                this.tableData[data.groupid].sensor[data.rowid].error="error"
            }
            this.tableData[data.groupid].sensor[data.rowid].category_id=newdata.category_id
            this.tableData[data.groupid].sensor[data.rowid].category_name=newdata.category_name
            this.tableData[data.groupid].sensor[data.rowid].brand_id=newdata.brand_id
            this.tableData[data.groupid].sensor[data.rowid].brand_name=newdata.brand_name
            this.tableData[data.groupid].sensor[data.rowid].unit=newdata.unit
            /*
            let barr = newdata.attr.split('/')
            let tarr = this.tableData[data.groupid].sensor[data.rowid].attr.split('/')
            for (let t in barr){
              console.log(t)
            }*/
            this.tableData[data.groupid].sensor[data.rowid].attr=newdata.attr
          },
          handleCurrentChange(val) {
            let that=this
            this.tableData.forEach((element,index) => {
              if (val!=null){
                if (val.line== element.line){
                  that.current=index
                  that.sensorData = that.tableData[index].sensor
                }
              }
            });
          },
          handleDown(){
            mallPojectDown(this.id).then(blob=>{
                let fileName = this.name + '.xlsx'
                if (window.navigator.msSaveOrOpenBlob) {
                    navigator.msSaveBlob(blob, fileName)
                } else {
                    var link = document.createElement('a')
                    link.href = window.URL.createObjectURL(blob)
                    link.download = fileName
                    link.click()
                    window.URL.revokeObjectURL(link.href)
                }
                        
            })
          },
          handleSubmit(){
            mallPojectPriceSave({"id":this.id,"data":this.tableData}).then(res=>{

            })
          },
          handleBatch(){
            let that=this
            that.pricesData=[]
            that.tableData.forEach(items=>{
              items.sensor.forEach(item=>{
                if (!that.pricesData.includes(item.sn)){
                  that.pricesData.push(item.sn)
                }
              })
            })
            this.$refs.batchModuleFlag.addModuleFn(this.pricesData,'新增')
          },
          batchData(data){
            let mpricedata={}
            let that=this
            data.forEach((element,index) => {
              let obj = {}
              if (element.price!="0"){
                mpricedata[element.name]=element.price
              }
            })
            this.tableData.forEach((element,index1) => {
              element.sensor.forEach((element1,index2) => {
                if (mpricedata.hasOwnProperty(element1.sn)){
                  that.tableData[index1].sensor[index2].price=mpricedata[element1.sn]
                }
              })
            })
          },
          tableRowClassName({row, rowIndex}) {
            if (row.error === "warning"|| row.prodcut_id=="") {
              return 'warning-row';
            } else if (row.error === "error") {
              return 'success-row';
            }
            return '';
          },
          //获取列表
          getData(id) {
              let that=this
              mallPojectPrice(id).then(res => {
                  if(res.code ==2000) {
                    that.tableData = res.data.data
                    if (that.tableData.length>0){
                      this.current=0
                      that.sensorData = that.tableData[this.current].sensor
                    }
                  }
              })
          },
        },
        created() {
          this.id=this.$route.query.id
          this.name=this.$route.query.name
          this.getData(this.id)
        },
    }
</script>
<style>
  .el-table .warning-row {
    background: #E6A23C;
  }

  .el-table .error-row {
    background: #F56C6C;
  }
</style>

